<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../css/base.css" rel="stylesheet">
<link href="../css/index.css" rel="stylesheet">
<link href="../css/m.css" rel="stylesheet">
<link href="../css/comment.css" rel="stylesheet">
<script src="../js/jquery.min.js" type="text/javascript"></script>
<title>留言板</title>
</head>
<body>
	<header>
	<div class="logo">
		<c:if test="${empty sessionScope.reqUser }">
			<h3>${sessionScope.username }的个人博客</h3>
		</c:if>
		<c:if test="${!empty sessionScope.reqUser }">
			<h3>${sessionScope.reqUser }的个人博客</h3>
		</c:if>
	</div>
	<nav id="nav">
	<ul>
		<li><a id="index" href="../index.jsp">网站首页</a></li>
		<c:if test="${empty sessionScope.reqUser }">
			<li><a
				href="../BlogServlet?task=queryMyBlog&author=${sessionScope.username }">个人博客</a></li>
		</c:if>
		<c:if test="${!empty sessionScope.reqUser }">
			<li><a
				href="../BlogServlet?task=queryOtherBlog&author=${sessionScope.reqUser }">个人博客</a></li>
		</c:if>
		<c:if test="${empty sessionScope.reqUser }">
			<li><a href="about.jsp">个人资料</a></li>
		</c:if>
		<c:if test="${empty sessionScope.reqUser }">
		<li><a href="../ShareServlet?task=queryShareList&username=${sessionScope.username }">生活记录</a></li>
		</c:if>
		<c:if test="${!empty sessionScope.reqUser }">
		<li><a href="../ShareServlet?task=queryShareList&username=${sessionScope.reqUser }">生活记录</a></li>
		</c:if>
		<li><a href="message.jsp">留言板</a></li>


	</ul>
	</nav> <script>
		window.onload = function() {
			var obj = null;
			var As = document.getElementById('nav').getElementsByTagName('a');
			obj = As[0];
			for (i = 1; i < As.length; i++) {
				if (window.location.href.indexOf(As[i].href) >= 0)
					obj = As[i];
			}
			obj.id = 'selected'
		}
	</script> </header>
	<div class="mnav">
		<li><a id="index" href="../index.jsp">网站首页</a></li>
		<c:if test="${empty sessionScope.reqUser }">
			<li><a
				href="../BlogServlet?task=queryMyBlog&author=${sessionScope.username }">个人博客</a></li>
		</c:if>
		<c:if test="${!empty sessionScope.reqUser }">
			<li><a
				href="../BlogServlet?task=queryOtherBlog&author=${sessionScope.reqUser }">个人博客</a></li>
		</c:if>
		<c:if test="${empty sessionScope.reqUser }">
			<li><a href="about.jsp">个人资料</a></li>
		</c:if>
		<li><a href="user/share.jsp">生活记录</a></li>
		<li><a href="message.jsp">留言板</a></li>
	</div>
	<article>
	<div style="display: none">
		<c:if test="${empty sessionScope.reqUser }">
			<input class="hostname" name="hostname" type="text"
				value="${sessionScope.username }">
		</c:if>
		<c:if test="${!empty sessionScope.reqUser }">
			<input class="hostname" name="hostname" type="text"
				value="${sessionScope.reqUser }">
		</c:if>
	</div>

	<div class="l_box">
		<div class="about_me">
			<h2>关于我</h2>
			<ul>
				<i><img src="/images/${sessionScope.userImg }"></i>
				<p>
					<b>姓名：${sessionScope.username }<span style="cursor: pointer;"
						onclick="logout()">[退出登录]</span></b><br> <b>性别：*</b><br> <b>联系电话：1*****</b>
				</p>
			</ul>
		</div>


		<div class="fenlei">
		
		</div>

	</div>
	<div class="r_box">
		<c:if test="${!empty sessionScope.reqUser }">
			<div
				style="width: 630px; margin: 10px auto; border: 1px solid #999; padding: 15px 15px">

				<h2 style="margin-bottom: 15px">留言内容</h2>

				<%-- <form
				action="MessageServlet?task=addmessage&hostname=${sessionScope.reqUser }"
				method="post"> --%>
				<input id="visitorname" name="visitorname" type="text"
					value="${sessionScope.username }" style="display: none"> <input
					name="hostname" type="text" value="${sessionScope.reqUser }"
					style="display: none"> <img id="messageimg" name="img"
					src="/images/${sessionScope.userImg }" style="display: none">
				<table>
					<tr style="height: 60px">

						<td class="hvttd"><textarea id="comm" name="content"
								style="width: 600px; height: 60px; resize: none; outline: none;"></textarea></td>
					</tr>

					<tr>
						<td colspan="2" style="float: right; margin-right: 10px"><input
							id="submitMessage" type="submit" value="提交" />
					</tr>
				</table>


				<!-- </form> -->
			</div>
		</c:if>


		<div style="margin: 0px auto; padding-top: 30px;padding-left: 30px;background-color: #fff" class="keleyitable">
			<h2 style="margin-bottom: 20px">留言列表</h2>
			<div id="applyDiv" style="width: 700px"></div>
			<div id="messageBox"></div>
			<span id="loadmore"
				style="display: none; cursor: pointer; margin-left: 260px">加载更多</span>
			<div id="messageBox2"></div>
		</div>


	</div>
	</article>
	<footer>
	<p>
		Design by <a href="/" target="_blank">个人博客</a> <a href="/">ICP备号</a>
	</p>
	</footer>

	<script type="text/javascript">
		$(document)
				.on(
						"click",
						".applyComment",
						function() {
							var visitorname = $("#visitorname").val();
							 str = "<input id='visitorname' name='visitorname' type='text' value='${sessionScope.username }' style='display: none'>"
								+"<input name='hostname' type='text' value='${sessionScope.reqUser }' style='display: none'>"
								+"<img id='messageimg' name='img' src='/images/${sessionScope.userImg }' style='display: none'>"
								+"<table>"
								+"<tr style='height: 60px'>"
								+"<td class='hvttd'>"
								+"<textarea id='comm' name='content' style='width: 575px; height: 60px; resize: none; outline: none;'>"
								+"@"+visitorname+":"
								+"</textarea>"
								+"</td>"
								+"</tr>"
								+"<tr>"
								+"<td colspan='2' style='float: right; margin-right: 100px'>"
								+"<input id='submitMessage' type='submit' value='提交' />"
								+"</tr>"
								+"</table>"
							
							$("#applyDiv").append(str);
						})
	</script>

	<script type="text/javascript">
		$(function() {
			//var commentUserId = $("#commentUserId").val();
			var hostname = $(".hostname").val();
			$
					.ajax({
						type : "post",
						url : "../MessageServlet",
						data : {
							"hostname" : hostname,
							"task" : "querymessageList"
						},
						success : function(message) {
							var list = eval(message);
							var str = "";
							var count;
							if (list.length > 5) {
								count = 5;
								$("#loadmore").show();
							} else {
								count = list.length;
							}
							for (var i = 0; i < count; i++) {
								str += "<input id='visitorname' name='visitorname' style='display: none' type='text' value='"+list[i].visitorname+"'>"
										+"<input class='messageId' name='id' style='display: none' type='text' value='"+list[i].id+"'>"
										+ "<table>"
										+ "<tr>"
										+ "<td rowspan='2' class='klytd'>"
										+ "<img name='img' style='width: 65px; height: 60px; border-radius: 50%; margin-bottom: 10px' src='"
										+ list[i].img
										+ "'>"
										+ "</td>"
										+ "<td class='hvttd'>"
										+ list[i].content
										+ "<c:if test='${empty sessionScope.reqUser }'>"
										+ "<span class='applyComment' style='padding-left:5px'>回复</span>"
										+ "<span class='delComment' style='padding-left:5px'>删除"
										+"</span></c:if>"
										+ "</td>"
										+ "</tr>"
										+ "<tr>"
										+ "<td class='hvttd' style='font-size: 10px; font-weight: normal;'>"
										+ list[i].time
										+ "</td>"
										+ "</tr>"
										+ "</table>"
							}
							$("#messageBox").append(str)
						},
						error : function(error) {
							alert(error)
						},
					})
		})

		$("#loadmore")
				.click(
						function() {
							var hostname = $(".hostname").val();
							$
									.ajax({
										type : "post",
										url : "../MessageServlet",
										data : {
											"hostname" : hostname,
											"task" : "querymessageList"
										},
										success : function(message) {
											var list = eval(message);
											var str = "";
											for (var i = 0; i < list.length; i++) {
												str += "<input id='visitorname' style='display: none' type='text' value='"+list[i].visitorname+"'>"
														+ "<table>"
														+ "<tr>"
														+ "<td rowspan='2' class='klytd'>"
														+ "<img style='width: 65px; height: 60px; border-radius: 50%; margin-bottom: 10px' src='"
														+ list[i].img
														+ "'>"
														+ "</td>"
														+ "<td class='hvttd'>"
														+ list[i].content
														+ "<c:if test='${sessionScope.reqUser }'>"
														+ "<span class='applyComment' style='padding-left:5px'>回复</span>"
														+ "<span class='delComment' style='padding-left:5px'>删除"
														+"</span></c:if>"
														+ "</td>"
														+ "</tr>"
														+ "<tr>"
														+ "<td class='hvttd' style='font-size: 10px; font-weight: normal;'>"
														+ list[i].time
														+ "</td>"
														+ "</tr>"
														+ "</table>"
											}
											$("#loadmore").hide();
											$("#messageBox").html("")
											$("#messageBox2").append(str)
										},
										error : function(error) {
											alert(error)
										},
									})
						})
	</script>
	
	<script>
		function isDelet(id) {
			if (confirm("确定删除吗?")) {
				window.location.href = "MessageServlet?task=delete&id=" + id
			}
		}

	</script>
	<script type="text/javascript">
		$(function() {
			$
					.ajax({
						type : "post",
						url : "TypeServlet",
						data : {
							"task" : "queryTypeList",
						},
						success : function(msg) {
							var list = eval(msg);
							var str = "<h2>文章分类</h2><ul>";
							for (var i = 0; i < list.length; i++) {
								
								str += "<li><a href='BlogServlet?task=queryBlogByType&type="+list[i].type+"'>" + list[i].type
								+ "</a></li>"
							}
							str += "</ul>";
							$(".fenlei").append(str)
						},

					})
		})
	</script>

	<script type="text/javascript">
	$(document)
	.on(
			"click",
			"#submitMessage",
			function() {
			var hostname = $(".hostname").val();
			var visitorname = $("#visitorname").val();
			var img = $("#messageimg").attr("src");
			var content = $('textarea').val();
			$.ajax({
				type : "post",
				url : "../MessageServlet",
				data : {
					"hostname" : hostname,
					"visitorname" : visitorname,
					"img" : img,
					"content" : content,
					"task" : "addmessage",
				},
				success : function(message) {
					if (message == "true") {
						window.location.href = "message.jsp"
					}
				}
			})
		})
	</script>
	<script type="text/javascript">
		$(document)
				.on(
						"click",
						".delComment",
						function() {
							if (confirm("确定删除吗?")) {
								var id = $(".messageId").val();
								$
										.ajax({
											type : "post",
											url : "../MessageServlet",
											data : {
												"id" : id,
												"task" : "delete",
											},
											success : function(message) {
												if (message == "true") {
													window.location.href = "message.jsp"
												}
											}
										});
							}
						})
	</script>
	<script type="text/javascript">
		function logout() {
			window.location.href = "../UserServlet?task=logout"
		}
	</script>
	<script type="text/javascript">
		$("#index").click(function() {
			window.location.href = "../UserServlet?task=out"
		})
	</script>
</body>
</html>